<template>
  <div class="box">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" class="reLoad">
      <div class="picBox">
        <img src="../../assets/img/labi.jpg" alt />
      </div>
      <div class="goodsList">
        <dl>
          <dt>
            <img src="../../assets/img/labi.jpg" alt />
          </dt>
          <dd>Air Jordan</dd>
        </dl>
        <dl>
          <dt>
            <img src="../../assets/img/labi.jpg" alt />
          </dt>
          <dd>Air Jordan</dd>
        </dl>
        <dl>
          <dt>
            <img src="../../assets/img/labi.jpg" alt />
          </dt>
          <dd>Air Jordan</dd>
        </dl>
        <dl>
          <dt>
            <img src="../../assets/img/labi.jpg" alt />
          </dt>
          <dd>Air Jordan</dd>
        </dl>
        <dl>
          <dt>
            <img src="../../assets/img/labi.jpg" alt />
          </dt>
          <dd>Air Jordan</dd>
        </dl>
      </div>
      <ul class="NewGoods">
        <li v-for="(pic, index) in pics" :key="index">
          <img :src="pic.img" alt />
        </li>
      </ul>
      <ul class="goodsLists">
        <li v-for="(good, index) in goods" :key="index">
          <router-link to="/ProductDetails">
            <div class="goodInf">
              <p>¥{{ good.price }}</p>
              <p style="color: gray">{{ good.person }}人购买</p>
            </div>
            <div class="goodPic">
              <img :src="good.img" alt />
            </div>
            <div class="goodPro">{{ good.text }}</div>
          </router-link>
        </li>
      </ul>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "RecommandPage",
  data() {
    return {
      count: 0,
      isLoading: false,
      goods: [
        {
          price: 889,
          person: 45,
          img: require("../../assets/img/labi.jpg"),
          text: "我是裤子"
        },
        {
          price: 44,
          person: 566,
          img: require("../../assets/img/labi.jpg"),
          text: "我是裤子"
        },
        {
          price: 55,
          person: 45,
          img: require("../../assets/img/labi.jpg"),
          text: "我是裤子"
        },
        {
          price: 67,
          person: 45,
          img: require("../../assets/img/labi.jpg"),
          text: "我是裤子"
        },
        {
          price: 67,
          person: 45,
          img: require("../../assets/img/labi.jpg"),
          text: "我是裤子"
        },
        {
          price: 67,
          person: 45,
          img: require("../../assets/img/labi.jpg"),
          text: "我是裤子"
        }
      ],
      pics: [
        {
          img: require("../../assets/img/labi.jpg")
        },
        {
          img: require("../../assets/img/labi.jpg")
        }
      ]
    };
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        // Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 1000);
    }
  }
};
</script>
<style scoped>
.box {
  width: 375px;
}
.reLoad {
  height: 100%;
}
.box .picBox {
  height: 150px;
}
.box .picBox img {
  width: 100%;
  height: 100%;
}
.box .goodsList {
  display: flex;
  justify-content: space-evenly;
}
.box .goodsList dl {
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.box .goodsList dl dt {
  width: 50px;
  height: 40px;
}
.box .goodsList dl img {
  width: 100%;
  height: 100%;
}
.box .goodsList dl dt {
  margin: 0 auto;
}
.box .goodsList dl dd {
  text-align: center;
  font-size: 10px;
}
.box .NewGoods {
  display: flex;
  justify-content: center;
}
.box .NewGoods li {
  width: 45%;
  height: 80px;
}
.box .NewGoods li img {
  width: 100%;
  height: 100%;
}
.box .goodsLists {
  border: 1px solid #cccccc;
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
}
.box .goodsLists li {
  border: 1px solid gray;
  padding: 10px 10px;
  width: 44%;
}
.box .goodsLists li .goodInf {
  display: flex;
  justify-content: space-between;
}
.box .goodsLists li img {
  width: 100%;
  height: 100%;
}
.box .goodsLists li .goodInf p {
  font-size: 16px;
}
.box .goodsLists li .goodInf p:nth-child(2) {
  font-size: 12px;
}
.box .goodsLists li .goodPro {
  font-size: 14px;
  text-align: center;
  overflow-wrap: break-word;
}
</style>